<template>
  <div>
    <div class="rule" v-for="(item,index) in ques" :key="index">
      <div class="head">
        <div class="main">
          <div class="num headCont">大题序号{{item.bigSort}}</div>
          <div class="questionType headCont" v-if="item.quesType===1">（单选题）</div>
          <div class="questionType headCont" v-else-if="item.quesType===2">（多选题）</div>
          <div class="questionType headCont" v-else-if="item.quesType===3">（判断题）</div>
          <div class="total headCont">总分<div class="score">{{total(item.configList)}}</div></div>
        </div>
        <div class="btns headCont">
          <el-button class="btn" size="mini" type="primary" @click="addRule(item,index)" v-if="detail===false">添加规则</el-button>
          <el-button class="btn" size="mini" type="danger" @click="deleteRule(item,index)" v-if="detail===false">删除大题</el-button>
        </div>
      </div>
      <div>
        <el-table
        :data="item.configList"
        style="width: 100%"
        border>
          <el-table-column
            prop="safeTypeName"
            label="题库类别"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            prop="quesNum"
            label="试题数量"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            prop="singleScore"
            label="每题分值"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            prop="totalScore"
            label="总分"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            v-if="detail===false"
            prop="handle"
            label="操作"
            header-align="center"
            align="center">
            <template slot-scope="scope">
              <el-button class="btn" size="mini" type="text" @click="updateRule(scope.row,item)">修改</el-button>
              <el-button class="btn detele" size="mini" type="text" @click="detele(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 新增规则弹窗 -->
      <add-rule 
        ref="addRule"
        :addRuleDialog='addRuleDialog' 
        @letDialogNone="letDialogNone"
        :examInfoId="examId"
        :bigQuesId="bigQuesId"
        :quesType="quesType"
        @updateQues="updateQues"
        :id="id"
        :isDeit="isDeit"
        :basicForm="basicForm"
        :currentScore="currentScore"
        :totalScoreB="totalScoreB"
      ></add-rule>
    </div>
  </div>
</template>

<script>
import addRule from './addRule.vue'
import ExamMessage from '@/api/exam/examMessage'
export default {
  components: { addRule },
  name: 'Rule',
  inject:['reload'],
  data(){
    return {
      addRuleDialog: false,
      bigQuesId: null,
      quesType: null,
      id: null,
      isDeit: false,
      basicForm: {}
    }
  },
  props: {
    examId: {
      type: Number
    },
    ques: {
      type: Array
    },
    // 当前总分
    currentScore: {
      type: Number
    },
    // 试卷总分
    totalScoreB: {
      type: Number
    },
    detail: {
      type: Boolean
    }
  },
  mounted(){
    console.log(this.detail,'detail')
  },
  components: {
    addRule
  },
  methods: {
    addRule(item,index){
      this.addRuleDialog = true
      this.bigQuesId = item.id
      this.quesType = item.quesType
      this.isDeit = false
      this.basicForm={
        safeTypeId: null,
        quesNum: 10,
        singleScore: 2,
      }
      // this.$refs.addRule[index].childMethod(item.id)
    },
    letDialogNone(){
      this.addRuleDialog = false
    },
    deleteRule(item,index){
      this.$confirm('此操作将删除该大题, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if(item.configList.length===0){
          ExamMessage.deleteBigQues(item.id).then(res=>{
            if(res.code===0){
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              ExamMessage.eExamConfigGet(this.examId).then(res=>{
                if(res.code === 0){
                  this.$emit("updateQues",res.data)
                }
              })
            }
          })
        }else{
          this.$message({
            type: 'warning',
            message: '该大题中存在配置信息，不能删除!'
          });
        }
       }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    updateQues(ques){
      this.$emit("updateQues",ques)
    },
    // 计算每一大题的总分
    total(configList){
      let bigTotalScore = 0
      for(var i=0;i<configList.length;i++){
        bigTotalScore += configList[i].totalScore
      }
      this.$emit("getBigScore",bigTotalScore)
      return bigTotalScore
    },
    // 删除规则
    detele(row){
      this.$confirm('此操作将删除该配置, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ExamMessage.deteleConfig(row.id).then(res=>{
          if(res.code===0){
            this.$message({
              type: 'success',
              message: '删除成功！'
            });
            ExamMessage.eExamConfigGet(this.examId).then(res=>{
              if(res.code === 0){
                this.$emit("updateQues",res.data)
              }
            })
          }else{
            this.$message({
              type: 'info',
              message: '删除失败！'
            });
          }
        })
       }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    // 修改规则
    updateRule(row,item){
      this.addRuleDialog = true
      this.id = row.id
      this.isDeit = true
      console.log(row,row)
      this.basicForm=row
      this.bigQuesId = item.id
    }
  }
};
</script>

<style scoped>
  .rule{
    padding: 20px 20px 40px 20px;
    background-color: #eaf1f8;
    margin-bottom: 40px;
  }
  .head{
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
  }
  .headCont{
    display: inline-block;
  }
  .score{
    display: inline-block;
    border-bottom: 1px solid #000;
  }
  .detele{
    color: red;
  }
</style>